<template>
	<view>
		<dsl-navbar title="用工企业" isBack bgTopImg="white" titleRight="添加企业" titleRightStyle='#00D88F'
			@rightForm="rightForm"/>
		<view class="padding bg-white" style="z-index: 999;position: relative;">
			<view class="align-center rowsb padding-lr">
				<view class="head">
					<image src="/static/user/icon_sysous.png" mode="" class="head_icon"></image>
					<input type="text" value="" placeholder="请输入企业名称" style="width: 90%;" v-model="name" />
				</view>
			</view>
			<view class="padding-top rowsb">
				<text class="text-red">入驻：{{countSum}}家</text>
				<view class="align-center  text-gray">
					<view :class="{'animation-scale-up text-red':sort==1}" @click="sort=1">升序</view>
					/
					<view :class="{'animation-scale-up text-red':sort==2}" @click="sort=2">降序</view>
					<!-- 	<text class="margin-left" style="color: #00D88F;">筛选 <text
							class="cuIcon-unfold margin-left-xs"></text> </text> -->
					<image src="/static/user/modules/imgrili.png" mode="widthFix" style="width: 28rpx;"
						class="margin-left" :class="{'animation-scale-up':isTimeOrder}"
						@click="isTimeOrder = !isTimeOrder"></image>
				</view>
			</view>
		</view>
		<view style="z-index: 999;position: relative;" class="animation-slide-top" v-if="isTimeOrder">
			<view class="bg-white">
				<view class="flex align-center rowsa">
					<view class="screening_classify " :class="{'animation-scale-up':t}" @click="t=true">
						<picker mode="date" :value="date1" start="1900-09-01" end="2090-09-01" @change="DateChange">
							<view class="picker">
								{{date1 ||'请选择开始时间'}}
							</view>
						</picker>
					</view>
					<view>-</view>
					<view class="screening_classify " :class="{'animation-scale-up':!t}" @click="t=false">
						<picker mode="date" :value="date2" start="1015-09-01" end="2090-09-01" @change="DateChange2">
							<view class="picker">
								{{date2 || '请选择结束时间'}}
							</view>
						</picker>
					</view>
				</view>
				<view class=" solid-top rowsa text-center ">
					<view class="solid-right padding" style="width: 50%;" @click="isTimeOrder = false">取消</view>
					<view class="text-red padding" style="width: 50%;" @click="submitSeach()">
						<view hover-class="animation-scale-up">确定</view>
					</view>
				</view>
			</view>
		</view>
		<view class="warps" v-if="false"></view>
		<view v-if="tenterpriseList && tenterpriseList.length !=0" >
			<view class="padding-lr padding-top-sm bg-white margin radius animation-scale-up  "
				v-for="(item,index) in tenterpriseList" :key="index" hover-class="bg-gray "
				 @click.sotp="employerDetail(item)">
				<view class=" solid-bottom padding-bottom">
					<view class="rowsb text-sm text-gray">
						<view>推广编号：{{item.testuser_id}}</view>
						<view>{{item.company_time}}</view>
					</view>
					<view class="flex  margin-top">
						<image :src="item.image" mode="" class="employer_image"></image>
						<view class="margin-left ">
							<view class="align-center ">
								<view class="employer_title  onelineshow text-bold">{{item.name}}</view>
								<!-- <view class="employer_fans one_overflow">
								粉丝：3000
							</view> -->
							</view>
							<view class="align-center justify-between" style="width: 510rpx;">
								<view>
									<view class="text-xs text-gray margin-tb-sm">
										当月/总服务费：{{item.costMonth}}/{{item.costSum}}
									</view>
									<view class="text-xs text-gray">当月/企业就职人数：{{item.personMonth}}人 /
										{{item.personSum}}人
									</view>
								</view>
								<view class="employer_submit">
									查看
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading></moreLoading>
		</view>
		<image src="/static/icon/imgqunfa-1.png" mode=""class="issue_button"
		@click="$tools.push('/pages/plugins/issueNotice')"></image>
	</view>
</template>

<script>
	import {
		getenterprise,
		enterpriseSum
	} from '@/common/path.js'
	export default {
		data() {
			return {
				isTimeOrder: false, //筛选
				sort: 1, //1升序，2降序
				tenterpriseList: [],
				name: '', //根据名称搜索
				countSum: 0, //企业入驻数量
				date1: '', //开始时间
				date2: '', //结束时间
				t: true,
				time: ''
			}
		},
		onShow() {
			this.pageData = 1
			this.getenterprise() //列表
			this.enterpriseSum() //统计总数
		},
		watch: {
			name(v) { //搜索功能
				this.pageData = 1
				this.getenterprise()
			},
			sort(i) { //升序 - 降序
				this.pageData = 1
				this.tenterpriseList = []
				this.getenterprise()
			},
			time() {
				this.tenterpriseList = []
				this.pageData = 1
				this.getenterprise()
				this.isTimeOrder = false //数据出来后关闭弹窗
			}
		},
		methods: {
			rightForm(){
				uni.navigateTo({
					url:'/pages/user/modules/share?num='+0
				})
			},
			//详情
			employerDetail(item) {
				this.$tools.push('/pages/enterprise/enterpriseDetail?id=' + item.testuser_id+'&time='+item.company_time)
			},

			//根据时间查询
			submitSeach() {
				if (!this.date1) {
					this.$tools.showToast('请选择开始时间')
					return
				}
				if (!this.date2) {
					this.$tools.showToast('请选择结束时间')
					return
				}
				this.time = this.date1 + ',' + this.date2
			},

			DateChange(e) {
				// console.log(e.detail.value);
				this.date1 = e.detail.value
				this.getenterprise()
			},
			DateChange2(e) {
				this.date2 = e.detail.value
				this.getenterprise()
			},

			//入驻多少家企业
			enterpriseSum() {
				let data = {}
				this.Http.POST(enterpriseSum, data)
					.then((res) => {
						if (res.code == 1) {
							// console.log('[入驻]', res);
							this.countSum = res.data
						}
					})
			},

			//用工企业          
			getenterprise() {
				let data = {
					page: this.pageData,
					listrows: 10,
					name: this.name,
					sort: this.sort, //1升序 -2 降序
					time: this.time
				}
				this.Http.POST(getenterprise, data)
					.then((res) => {
						if (res.code == 1) {
							// console.log('[用工企业]', res);
							if (this.pageData == 1) {
								this.tenterpriseList = res.data
							} else {
								this.tenterpriseList.push(...res.data)
							}
						}
					})
			},
			//触底分页  
			onReachBottom(e) {
				this.pageData++
				this.getenterprise()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F6FA;
	}

	.head {
		width: 600rpx;
		height: 65rpx;
		background: #F0F0F0;
		border-radius: 32px;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
	}

	.head_icon {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}

	input {
		font-size: 28rpx;
	}

	//企业图片
	.employer_image {
		width: 80rpx;
		height: 80rpx;
		background: #eeeeee;
		border-radius: 50%;
		opacity: 1;
	}

	.employer_title {
		width: 392rpx;
	}

	.employer_fans {
		width: 130rpx;
		height: 30rpx;
		border: 1rpx solid #2B9AFF;
		opacity: 1;
		border-radius: 20rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		color: #2B9AFF;
	}

	.employer_submit {
		width: 110rpx;
		height: 50rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
	}

	// 筛选
	.screening_classify {
		height: 50rpx;
		background: #999999;
		opacity: 1;
		text-align: center;
		line-height: 50rpx;
		border-radius: 99rpx;
		color: white;
		font-size: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin: 10rpx;
	}

	.screening_active {
		background: #00D88F !important;
	}

	.warps {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1;
	}
	.issue_button {
		background-color: #00D88F;
		border-radius: 99rpx;
		height: 100rpx;
		width: 100rpx;
		color: white;
		line-height: 100rpx;
		text-align: center;
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
	}
	.text-red{
		color: #00D88F;
	}
</style>
